<template>
	<view class="order">
		<view class="sosuo">
			<text class="ri-search-eye-line"></text>
			<input class="weui-input" auto-focus placeholder="搜索" />
		</view>
		<view class="zhanweide">

		</view>
		<view class="ditu">
			<view class="dizhi">
				<view class="name" @click="tiaozhuanditu">
					<text>{{dangqian}}</text>
					<text class="ri-arrow-right-s-line"></text>
				</view>
				<text class="juli">距离您470m</text>
			</view>
			<view class="qiehuan">
				<view class="fangshi">
					<text class="jdiahd" :class="isf==0?'qiehuanyanse':''" @click="ziqu">自取</text>
					<text class="jdiahd" :class="isf==1?'qiehuanyanse':''" @click="waimai">外卖</text>
				</view>
			</view>
		</view>
		<view class="gomaixuzhi">
			<text class="ri-slack-fill t1"></text>
			<text class="wenzhi">单笔买满十杯，送一杯，详情请见订购须知。</text>
			<text></text>
		</view>
		<view class="tixian">
			<scroll-view enable-flex="true" class="scroll-view_left" scroll-y="true" style="width: 100%">
					<view @click="change(i)" :class="dianjie==i?'yanshe':''" class="leftdaohang" v-for="(v,i) in arr"
						:key="i">
						<view class="image">
							<image :src="v.scr" mode=""></image>
						</view>
						<text>{{v.name}}</text>
					</view>
			</scroll-view>
			<scroll-view :scroll-into-view="intoindex" enable-flex="true" class="scroll-view_reight" scroll-y="true"
				style="width: 100%">
				<view class="neirongmoban">
					<view class="haoyou">
						<text class="haoshuan">好友一起点，分帐无需算</text>
						<text class="haoyupingdan">好友拼单</text>
					</view>
					<view class="datu">
						<image src="https://qincore.cn/xbk/season/18-15-43.png" mode=""></image>
					</view>
					<!-- 轻松时光 -->
					<text id="index1" class="qingsongshiguang">轻松时光</text>
					<scroll-view enable-flex="true" class="scroll-view_H" scroll-x="true" style="width: 100%"
						bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll">
						<view class="ftrdfs" v-for="(v,index) in arr2" :key="v.id">
							<text class="remai">热卖</text>
							<image :src="v.scr" mode=""></image>
							<text class="name">{{v.name}}</text>
							<view class="jiage">
								<text>￥{{v.mayl}}</text>
								<text class="ri-subtract-line jiahao" v-if="v.num" @click="reducePlan(arr2[index])"></text>
								<text class="num" v-if="v.num">{{v.num}}</text>
								<text class="ri-add-line jiahao" @click="addPlan(arr2[index])"></text>
							</view>
						</view>
					</scroll-view>
					<!-- plan Bing代码 -->
					<text id="index2" class="planbing">Plan Bing</text>
					<view class="yangzhiganlu" v-for="(v,index) in planbing" :key="v.id">
							<view class="lefthdd">
								<text class="renmaimai">热卖</text>
								<image :src="v.scr" mode=""></image>
							</view>
							<view class="riegf">
								<text class="name">{{v.name}}</text>
								<text class="miaoshu">{{v.miaoshu}}</text>
								<view class="jiage">
									<text>￥{{v.mayl}}</text>
									<text class="ri-subtract-line jianhao" v-if="v.num" @click="reducePlan(planbing[index])"></text>
									<text class="num" v-if="v.num">{{v.num}}</text>
									<text class="ri-add-line jiahao"  @click="addPlan(planbing[index])"></text>
								</view>
							</view>
					</view>

					<!-- 店长推荐 -->
					<text id="index3" class="planbing">店长推荐</text>
					<view class="yangzhiganlu" v-for="(v,index) in dainzhangtuijian" :key="v.id">
						<view class="lefthdd">
							<text class="renmaimai">热卖</text>
							<image :src="v.scr" mode=""></image>
						</view>
						<view class="riegf">
							<text class="name">{{v.name}}</text>
							<text class="miaoshu">{{v.miaoshu}}</text>
							<view class="jiage">
								<text>￥{{v.mayl}}</text>
								<text class="ri-subtract-line jianhao" v-if="v.num" @click="reducePlan(dainzhangtuijian[index])"></text>
								<text class="num" v-if="v.num">{{v.num}}</text>
								<text class="ri-add-line jiahao"  @click="addPlan(dainzhangtuijian[index])"></text>
							</view>
						</view>
					</view>
					<!-- 找好茶 -->
					<text id="index4" class="planbing">找好茶</text>
					<view class="yangzhiganlu" v-for="(v,index) in zhaohaocha" :key="v.id">
						<view class="lefthdd">
							<text class="renmaimai">热卖</text>
							<image :src="v.scr" mode=""></image>
						</view>
						<view class="riegf">
							<text class="name">{{v.name}}</text>
							<text class="miaoshu">{{v.miaoshu}}</text>
							<view class="jiage">
								<text>￥{{v.mayl}}</text>
								<text class="ri-subtract-line jianhao" v-if="v.num" @click="reducePlan(zhaohaocha[index])"></text>
								<text class="num" v-if="v.num">{{v.num}}</text>
								<text class="ri-add-line jiahao"  @click="addPlan(zhaohaocha[index])"></text>
							</view>
						</view>
					</view>
					<!-- 找口感 -->
					<text id="index5" class="planbing">找口感</text>
					<view class="yangzhiganlu" v-for="(v,index) in zhaokogan" :key="v.id">
						<view class="lefthdd">
							<text class="renmaimai">热卖</text>
							<image :src="v.scr" mode=""></image>
						</view>
						<view class="riegf">
							<text class="name">{{v.name}}</text>
							<text class="miaoshu">{{v.miaoshu}}</text>
							<view class="jiage">
								<text>￥{{v.mayl}}</text>
								<text class="ri-subtract-line jianhao" v-if="v.num" @click="reducePlan(zhaokogan[index])"></text>
								<text class="num" v-if="v.num">{{v.num}}</text>
								<text class="ri-add-line jiahao"  @click="addPlan(zhaokogan[index])"></text>
							</view>
						</view>
					</view>
					<!-- 找奶茶 -->
					<text id="index6" class="planbing">找奶茶</text>
					<view class="yangzhiganlu" v-for="(v,index) in zhaonanicha" :key="v.id">
						<view class="lefthdd">
							<text class="renmaimai">热卖</text>
							<image :src="v.scr" mode=""></image>
						</view>
						<view class="riegf">
							<text class="name">{{v.name}}</text>
							<text class="miaoshu">{{v.miaoshu}}</text>
							<view class="jiage">
								<text>￥{{v.mayl}}</text>
								<text class="ri-subtract-line jianhao" v-if="v.num" @click="reducePlan(zhaonanicha[index])"></text>
								<text class="num" v-if="v.num">{{v.num}}</text>
								<text class="ri-add-line jiahao"  @click="addPlan(zhaonanicha[index])"></text>
							</view>
						</view>
					</view>
					<!-- 属于你 -->
					<text id="index7" class="planbing">属于你</text>
					<view class="yangzhiganlu" v-for="(v,index) in xiaoxiangxian" :key="v.id">
						<view class="lefthdd">
							<text class="renmaimai">热卖</text>
							<image :src="v.scr" mode=""></image>
						</view>
						<view class="riegf">
							<text class="name">{{v.name}}</text>
							<text class="miaoshu">{{v.miaoshu}}</text>
							<view class="jiage">
								<text>￥{{v.mayl}}</text>
								<text class="ri-subtract-line jianhao" v-if="v.num" @click="reducePlan(xiaoxiangxian[index])"></text>
								<text class="num" v-if="v.num">{{v.num}}</text>
								<text class="ri-add-line jiahao"  @click="addPlan(xiaoxiangxian[index])"></text>
							</view>
						</view>
					</view>
					<!-- 找拿铁 -->
					<text id="index8" class="planbing">找拿铁</text>

					<view class="yangzhiganlu" v-for="(v,index) in zhaonantiu" :key="v.id">
						<view class="lefthdd">
							<text class="renmaimai">热卖</text>
							<image :src="v.scr" mode=""></image>
						</view>
						<view class="riegf">
							<text class="name">{{v.name}}</text>
							<text class="miaoshu">{{v.miaoshu}}</text>
							<view class="jiage">
								<text>￥{{v.mayl}}</text>
								<text class="ri-subtract-line jianhao" v-if="v.num" @click="reducePlan(zhaonantiu[index])"></text>
								<text class="num" v-if="v.num">{{v.num}}</text>
								<text class="ri-add-line jiahao"  @click="addPlan(zhaonantiu[index])"></text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="shopCart" v-if="allPrice">
			<view class="allPrice">
				<view>￥<text>{{allPrice}}.00</text></view>
			</view>
			<button id="buy" class="{allPrice?'buyclass':''}" @click="gomai">购买</button>
		</view>
		<!-- <view class="zhanhanahfyagh">
			<text>到底了</text>
		</view> -->
	</view>


</template>

<script>
	import date from '../../utils/date.js'
	export default {
		data() {
			return {
				tit:0,
				zong:[],
				kk:'',
				allArr:[],
				finaArr:[],
				// num:20,
				dangqian:'',
				allPrice: 0,
				intoindex: '',
				isf: 0,
				dianjie: 0,
				arr: [],
				arr2: [],
				planbing: [],
				dainzhangtuijian: [],
				zhaohaocha: [],
				zhaokogan: [],
				zhaonanicha: [],
				xiaoxiangxian: [],
				zhaonantiu: [],
			}

		},
		methods: {
			change(index) {
				this.dianjie = index;
				// console.log(this.dianjie)
				let temp = '';
				switch (index) {
					case 0:
						temp = 'index1';
						break;
					case 1:
						temp = 'index2';
						break;
					case 2:
						temp = 'index3';
						break;
					case 3:
						temp = 'index4';
						break;
					case 4:
						temp = 'index5';
						break;
					case 5:
						temp = 'index6';
						break;
					case 6:
						temp = 'index7';
						break;
					case 7:
						temp = 'index8';
						break;
				}
				this.intoindex = temp
			},
			// 下拉
			// open(){
			//         // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
			//         this.$refs.popup.open('top')
			//       },
			// 	 change(e) {
			// 	        console.log('popup ' + e.type + ' 状态', e.show)
			// 	    },
			// 	    /**
			// 	     * 打开popup
			// 	     */
			// 	    toggle() {
			// 	        this.$refs.popup.open()
			// 			},
			// 跳转到店名
			tiaozhuanditu() {
				uni.navigateTo({
					url: '/pages/Home/Oneself'
				});
			},
			// left的左导航栏查询函数
			orderleft(){
				this.$ajax({
					url:'/pages/orderleft/orderleft'
				}).then((res)=>{
					// console.log(res.data.msg)
					this.arr=res.data.data
				})
			},
			// right的右导航栏查询函数
			orderright(){
				this.$ajax({
					url:'/pages/order/order'
				}).then((res)=>{
					// console.log(res)
					this.zong=res.data.data;
					let key = [];
					// console.log(res.data.data[8].Fname)
					// this.arr2.push(res.data.data[8]);
					// this.arr2.push(res.data.data[9])
					// console.log(55555,this.arr2)
					for(var i=0;i<res.data.data.length;i++){
						// console.log(i)
						if(res.data.data[i].Fname==1){
							// console.log(res.data.data[i])
							this.arr2.push(res.data.data[i]);
							
						}else if(res.data.data[i].Fname==2){
							this.planbing.push(res.data.data[i]);
							// console.log(5555555,this.planbing)
						}else if(res.data.data[i].Fname==3){
							this.dainzhangtuijian.push(res.data.data[i])
							// console.log(this.dainzhangtuijian)
						}else if(res.data.data[i].Fname==4){
							this.zhaohaocha.push(res.data.data[i]);
							// console.log(this.zhaohaocha)
						}else if(res.data.data[i].Fname==5){
							this.zhaokogan.push(res.data.data[i]);
							// console.log(this.zhaokogan)
						}else if(res.data.data[i].Fname==6){
							this.zhaonanicha.push(res.data.data[i]);
							// console.log(this.zhaonanicha)
						}else if(res.data.data[i].Fname==7){
							this.xiaoxiangxian.push(res.data.data[i]);
							// console.log(this.xiaoxiangxian)
						}else{
							this.zhaonantiu.push(res.data.data[i]);
							// console.log(this.zhaonantiu);
						}
					}
					// this.allArr.push(this.arr2);
					// this.allArr.push(this.planbing);
					// this.allArr.push(this.dainzhangtuijian);
					// this.allArr.push(this.zhaohaocha);
					// this.allArr.push(this.zhaokogan);
					// this.allArr.push(this.zhaonanicha);
					// this.allArr.push(this.xiaoxiangxian);
					// this.allArr.push(this.zhaonantiu);
					// console.log(66666,this.allArr)
					// for (let key in this.finaArr){
					// 	this.finaArr.ke
						
					// }
					// for(var i = 0; i < this.allArr.length; i++){
					// 	// key.push(this.arr[i].name);
					// 	// console.log(key);
					// 	var kk=this.arr[i].name
					// 	// console.log(this.kk)
					// 	this.finaArr.push(:this.allArr[i]});
					// 	// this.kk=''
					// 	// console.log()
						
					// }
					// for(let i = 0; i < key.length; i++){
					// }
					// console.log(this.allArr[0]);
					
					// console.log(123456,this.finaArr);
					
					
					
				})
			},
			// 地址
			query() {
				this.$ajax({
					url:'/pages/home/store',
				}).then((res)=>{
					this.dangqian=res.data.data[0].storname;
					// console.log(this.dangqian)
					
				})
			},
			// plan bimgj加减
			reducePlan(v){
				v.num--
				this.price()
				this.$forceUpdate()
			},
			addPlan(v){
				console.log(v)
				v.num++
				this.price()
				
				// this.$forceUpdate()
			},
			// 总额
			price(){
				console.log(this.zong)
				this.allPrice=0
				console.log(88888,this.tit)
					for(let j=0;j<this.zong.length;j++){
						this.allPrice+=this.zong[j].num*this.zong[j].mayl;
						if(this.tit==this.zong[j].id){
							this.zong[j].num=1
						}
					}
				
			},
			// 点击购买
			gomai(){
				// console.log(this.zong)
				let shangping=[];
				for(let j=0;j<this.zong.length;j++){
					if(this.zong[j].num!=0){
						let time=new Date();
						let result = new Date(time).getTime();
						let datemiet=date(result);
						this.zong[j].time=datemiet
						shangping.push(this.zong[j])
					}
				}
				// let fff = JSON.stringify(shangping)
				// JSON.stringify(this.zong[j])
				let time=new Date();
				let result = new Date(time).getTime();
				let datemiet=date(result)
				// console.log(45158,datemiet)
				
				getApp().globalData.shangping = shangping;
				
				 // console.log(99999,result)
				for(let i=0;i<shangping.length;i++){
					this.$ajax({
						url:'/pages/lishi/lishi',
						method:"post",
						data:{
							scr:shangping[i].scr,
							name:shangping[i].name,
							mayl:shangping[i].mayl,
							state:'已完成',
							type:'外卖',
							danming:'府城国际店',
							time:result,
							userid:2,
							num:shangping[i].num
						}
					}).then((res)=>{
						console.log(99999,res)
					})
				}
				
				uni.switchTab({
					url:'/pages/Take/take?shangping='
				})
			},
			// 再来一dan
			zailaiyidan(){
				this.tit=getApp().globalData.tit;
				// console.log(89898,this.tit)
				if(this.tit!=0){
					for(let j=0;j<this.zong.length;j++){
						if(this.tit==this.zong[j].id){
							this.zong[j].num=this.zong[j].num+1;
						}
					}
				}
			
			},
			ziqu() {
				this.isf = 0;
			},
			waimai() {
				this.isf = 1;
			},
			// upper(e) {
			// 	console.log(e)
			// },

			// lower(e) {
			// 	console.log(e)
			// },

			// scroll(e) {
			// 	console.log(e)
			// },
		},
		mounted(){
			// left导航
			this.orderleft(),
			// right内容
			this.orderright(),
			// 店名
			this.query()
		},
		onShow(){
			this.zailaiyidan()
		}
	}
</script>

<style lang="less">
	.order {
		width: 750rpx;
		background-color: #fdfdfd;
		position: relative;

		.zhanweide {
			width: 750rpx;
			height: 150rpx;
		}

		.sosuo {
			display: flex;
			width: 750rpx;
			height: 180rpx;
			background-color: #ffffff;
			justify-content: center;
			align-items: flex-end;
			border-bottom: 1rpx solid #ffffff;
			position: fixed;
			left: 0rpx;
			top: 0rpx;

			text {
				display: block;
				font-size: 33rpx;
				color: #9c9c9c;
				position: absolute;
				top: 105rpx;
				left: 240rpx;
			}

			input {
				width: 343rpx;
				height: 60rpx;
				border: 1rpx solid #f6f6f6;
				border-radius: 30rpx;
				background-color: #f6f6f6;
				text-align: center;
				font-size: 33rpx;
				color: #9c9c9c;
				margin-right: 120rpx;
				margin-bottom: 30rpx;
			}

		}

		.ditu {
			width: 750rpx;
			height: 100rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin-top: 68rpx;

			.dizhi {
				width: 285rpx;
				height: 100rpx;


				.name {
					font-size: 36rpx;
					font-weight: bold;
					margin-top: 10rpx;
					color: #000;
					letter-spacing: 5rpx
				}

				.juli {
					margin-top: 10rpx;
					display: block;
					font-size: 20rpx;
					color: #e0e0e0;
				}
			}

			.qiehuan {
				width: 285rpx;
				height: 100rpx;

				display: flex;
				justify-content: flex-end;
				align-items: center;

				.fangshi {
					width: 160rpx;
					height: 62rpx;
					border: 1rpx solid #e2e2e2;
					background-color: #f0f2f1;
					border-radius: 30rpx;

					text {
						display: inline-block;
						width: 79rpx;
						height: 60rpx;
						border-radius: 30rpx;
						font-size: 20rpx;
						text-align: center;
						line-height: 60rpx;

					}
				}
			}
		}

		.gomaixuzhi {
			width: 750rpx;
			height: 43rpx;
			margin-top: 30rpx;

			.t1 {
				color: #ffc400;
				font-size: 28rpx;
				margin-left: 40rpx;
			}

			.wenzhi {
				margin-left: 12rpx;
				color: #888888;
				font-size: 25rpx;
			}

		}

		.tixian {
			width: 750rpx;
			display: flex;
			justify-content: space-between;
			border-top: 2rpx solid #d4d2ce;
			margin-top: 30rpx;

			.scroll-view_left {
				width: 155rpx !important;
				height: 1150rpx;
				background-color: #f0f1f3;

				.leftdaohang {
					width: 100rpx;
					height: 150rpx;
					margin: 0 auto;
					margin-top: 50rpx;
					color: #b0aeab;

					text {
						display: block;
						width: 100rpx;
						height: 50rpx;
						text-align: center;
						line-height: 50rpx;
						font-size: 23rpx;

					}

					.image {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50rpx;
						margin: 0 auto;

						image {
							width: 80rpx;
							height: 80rpx;
							border-radius: 50rpx;
							margin: 0 auto;
						}
					}
				}

				.yanshe {
					// border: 1rpx solid #00aa00;
					background-color: #FFFFFF;
					color: #00ffff;
					border-radius: 20rpx;
				}

			}

			.scroll-view_reight {
				width: 595rpx;
				height: 1150rpx;
				background-color: #FFFFFF;

				.neirongmoban {
					width: 551rpx;
					margin: 0 auto;
					height: 1150rpx;
					// margin-bottom: 500rpx;
					// background-color: #007AFF;
					// border: 1rpx solid #007AFF;

					.haoyou {
						width: 551rpx;
						height: 88rpx;
						background-color: #f5f5f5;
						border-radius: 10rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 22rpx;

						.haoshuan {
							color: #292929;
							font-size: 24rpx;
							margin-left: 20rpx;
						}

						.haoyupingdan {
							display: block;
							width: 142rpx;
							height: 52rpx;
							border-radius: 50rpx;
							margin-right: 20rpx;
							background-color: #007f61;
							font-size: 27rpx;
							color: #FFFFFF;
							text-align: center;
							line-height: 52rpx;
						}

					}

					.datu {
						width: 550rpx;
						height: 347rpx;
						border-radius: 20rpx;
						margin-top: 22rpx;

						image {
							width: 550rpx;
							height: 347rpx;
							border-radius: 20rpx;
						}
					}

					.qingsongshiguang {
						display: block;
						width: 142rpx;
						height: 50rpx;
						background-color: #fff6ed;
						color: #b79c5d;
						margin-top: 50rpx;
						font-size: 20rpx;
						text-align: center;
						line-height: 50rpx;
					}

					.scroll-view_H {
						display: flex;
						width: 551rpx;
						height: 345rpx;
						justify-content: space-between;
						margin-top: 60rpx;

						.ftrdfs {
							flex-shrink: 0;
							width: 252rpx;
							height: 341rpx;
							border: 2rpx solid #e7e7e7;
							border-radius: 20rpx;
							margin-right: 10rpx;
							position: relative;

							.remai {
								display: block;
								width: 70rpx;
								height: 32rpx;
								border-radius: 50rpx 0rpx;
								position: absolute;
								left: 0;
								top: 0;
								font-size: 22rpx;
								background-color: #ff6f33;
								text-align: center;
								color: #FFFFFF;
							}

							image {
								width: 252rpx;
								height: 200rpx;
								border-radius: 20rpx;
							}

							.name {
								display: block;
								font-size: 30rpx;
								font-weight: bold;
								margin-top: 20rpx;
								margin-left: 20rpx;
								letter-spacing: 5rpx
							}

							.jiage {
								display: flex;
								justify-content: space-between;
								align-items: center;
								margin: 10rpx 20rpx;

								:nth-child(1) {
									font-size: 30rpx;
									font-weight: bold;
								}

								.jiahao {
									width: 30rpx;
									height: 30rpx;
									font-size: 30rpx;
									font-weight: bold;
									background-color: #008765;
									border-radius: 20rpx;
									color: #FFFFFF;
								}
								.num {
									margin: 0 10rpx;
									font-size: 30rpx;
								}

							}
						}
					}

					.planbing {
						display: block;
						width: 164rpx;
						height: 50rpx;
						background-color: #fff6ed;
						color: #b79c5d;
						margin-top: 50rpx;
						font-size: 20rpx;
						text-align: center;
						line-height: 50rpx;
					}

					.yangzhiganlu {
						width: 551rpx;
						height: 224rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						position: relative;
						margin-bottom: 50rpx;
						margin-top: 20rpx;

						.lefthdd {
							.renmaimai {
								display: block;
								width: 70rpx;
								height: 32rpx;
								border-radius: 50rpx 0rpx;
								position: absolute;
								left: 20rpx;
								top: 20rpx;
								font-size: 22rpx;
								background-color: #ff6f33;
								text-align: center;
								color: #FFFFFF;

							}

							image {
								width: 158rpx;
								height: 124rpx;
							}
						}

						.riegf {
							margin-left: 15rpx;
							width: 355rpx;
							.name {
								display: block;
								font-size: 30rpx;
								font-weight: bold;
								margin-top: 20rpx;
								letter-spacing: 5rpx
							}

							.miaoshu {
								font-size: 20rpx;
								color: #d4d5d6;
								overflow: hidden;
								display: -webkit-box;
								text-overflow: ellipsis;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
							}

							.jiage {
								display: flex;
								justify-content: space-between;
								align-items: center;
								margin-top: 20rpx;

								:nth-child(1) {
									font-size: 30rpx;
									font-weight: bold;
								}

								.jiahao {
									width: 40rpx;
									height: 40rpx;
									background-color: #008766;
									color: #FFFFFF;
									text-align: center;
									line-height: 40rpx;
									border-radius: 50rpx;
									margin-right: 40rpx;
								}
								.jianhao{
									width: 40rpx;
									height: 40rpx;
									background-color: #008766;
									color: #FFFFFF;
									text-align: center;
									line-height: 40rpx;
									border-radius: 50rpx;
									
								}
							}
						}

					}
				}
			}
		}
	}

	.jdiahd {
		color: #a7a9a8;
		font-weight: bold;
	}

	.qiehuanyanse {
		color: #FFFFFF;
		background-color: #007f61;

	}
.shopCart {
		  position: fixed;
		  bottom: 0;
		  right: 0;
		  display: flex;
		  align-items: center;
		  justify-content: space-between;
		  padding: 0 30rpx;
		  width: 100%;
		  height: 135rpx;
		  background-color: #fff;
		  border-top: 1px solid #eee;
		  border-bottom: 1px solid #eee;
		  box-sizing: border-box;
		}
		.shopCart .allPrice {
		  font-size: 24rpx;
		  color: #444;
		}
		.shopCart .allPrice view {
		  display: flex;  
		  color: #000;
		  font-weight: 700;
		  margin-top: 10rpx;
		}
		.shopCart .allPrice view text {
		  font-size: 40rpx;
		}
		#buy {
		  margin: 0;
		  width: 228rpx;
		  height: 80rpx;
		  font-size: 38rpx;
		  line-height: 40rpx;
		  font-weight: normal;
		  color: #666;
		}
		button.buyclass {
			display: flex;
			align-items: center;
			justify-content: center;
		    background-color: #008766;
		    color: #fff!important
		}
		.zhanhanahfyagh{
			width: 750rpx;
			height: 200rpx;
			background-color: #00ff7f;
			border-radius: 30rpx;
				text{
					display: block;
					width: 750rpx;
					height: 200rpx;
					color: #FFFFFF;
					text-align: center;
					font-size: 60rpx;
				}
		}
</style>
